<template>
    <div class="tree">
        <li v-for="(item,index) in treeData" :key="index">
            <ul>
                <li v-if="item.show">
                    <span v-if="item.nextLevelGroups.length>0">
                        <img src="./images/showTree.png" @click="showDeaprtInfo(item)" v-if="item.showPic" />
                    </span>
                    <img src="./images/treePerson.png" class="person" v-if="item.nextLevelGroups.length==0" />
                    <img src="./images/putTree.png" v-if="!item.showPic" @click="showDeaprtInfo(item)" />

                    <span @click.stop="showDeaprtMentInfo(item)">{{item.groupName}}</span>
                </li>
                <div v-if="item.groupUsers.length>0" style="margin-left:15px;">
                    <li v-for="(user,userIndex) in item.groupUsers" :key="user.id" @click.stop="showPersonInfo(user)">
                        <img src="./images/treePerson.png" class="person" />
                        <span>{{user.userName}}</span>
                    </li>
                </div>
            </ul>
            <ul>
                <org-tree :treeData="item.nextLevelGroups" />

            </ul>
        </li>
    </div>
</template>
<script>
    import cloneDeep from 'lodash/cloneDeep';
    var myData = []
    export default {
        props: {
            treeData: {
                type: Array,
                default: function () {
                    return [];
                }
            }
        },
        watch: {
            treeData(val) {
                console.log(val)
                console.log('出va')
            }
        },
        components: {},
        data() {
            return {

            };
        },


        methods: {

            // 人员信息
            showPersonInfo(val) {
                console.log('点炙')
                this.$emit("lookPersonInfo", val)
            },
            showDeaprtInfo(item) {
                if (Object.keys(this.$parent.$listeners).length == 0) {
                    console.log('进入09')
                    // this.$emit('changeTreeData',myData)
                    console.log(this)
                    this.$emit("showTree",item)
                } else {

                    this.$parent.$listeners.showTree(item);
                }
    
            },
            // 显示部门信息
            showDeaprtMentInfo(item) {
                this.$store.commit('SET_GROUPID',item.groupId)

            }
        }
    };
</script>
<style scoped>
    .tree img {
        width: 15px;
        height: 15px;
    }

    .tree ul {
        padding-left: 14px;
    }

    ul,
    li {
        list-style: none;
    }

    /**
.tree ul:before {
    content: '';
    border-left: 1px dashed #999999;
    height: calc(100%);
    position: absolute;
    left: 10px;
    top: 0px;
}*/
    .tree ul li {
        line-height: 30px;
        cursor: pointer;
    }

    /**
.tree ul li::after {
    content: '';
    width: 40px;
    height: 0;
    border-bottom: 1px dashed #000;
    position: absolute;
    right: calc(100% - 9px);
    top: 22px;
} **/
    .tree ul li img {
        vertical-align: middle;
        cursor: pointer;
        margin-right: 4px;
    }

    .tree ul li span {
        vertical-align: middle;
        color: #666;
        font-size: 14px;
    }

    .tree ul li span:hover {
        text-decoration: underline;
        color: #66b1ff;
    }

    .tree ul li img.person {
        width: 15px;
        height: 17px;
    }
</style>